<template
  ><div>
    <h-form ref="formMethod" :model="formMethod" :label-width="80">
      <h-form-item label="姓名" prop="name" required>
        <h-input v-model="formMethod.name" placeholder="请输入姓名"></h-input>
      </h-form-item>
      <h-form-item label="邮箱" prop="mail" required>
        <h-input v-model="formMethod.mail" placeholder="请输入邮箱"></h-input>
      </h-form-item>
      <h-form-item label="城市" prop="city" required>
        <h-select v-model="formMethod.city" placeholder="请选择所在地">
          <h-option value="beijing">北京市</h-option>
          <h-option value="shanghai">上海市</h-option>
          <h-option value="shenzhen">深圳市</h-option>
        </h-select>
      </h-form-item>
      <h-form-item>
        <h-button type="primary" @click="handleSubmit('formMethod')">提交</h-button>
        <h-button type="primary" @click="handleValidField('formMethod', 'name')" style="margin-left: 8px;">校验</h-button>
        <h-button type="ghost" @click="handleReset('formMethod')" style="margin-left: 8px;" >重置</h-button>
      </h-form-item>
    </h-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formMethod: {
        name: "",
        mail: "",
        city: "",
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$hMessage.success("提交成功!");
        } else {
          this.$hMessage.error("表单验证失败!");
        }
      });
    },
    handleValidField(name, str) {
      this.$refs[name].validateField(str, (valid) => {
        if (valid) {
          this.$hMessage.error(valid);
        } else {
          this.$hMessage.success("校验正确");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>
<style>

</style>